<page-header [title]="'日志列表'"></page-header>
<nz-card [nzBordered]="false">
  <form nz-form [nzLayout]="'inline'" class="search__form">
    <nz-row [nzGutter]="{ md: 8, lg: 24, xl: 48 }">
      <nz-col nzMd="8" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="no">内容关键字</nz-form-label>
          <nz-form-control>
            <input nz-input [(ngModel)]="queryStr" name="no" placeholder="内容关键字" id="no">
          </nz-form-control>
        </nz-form-item>
      </nz-col>
      <nz-col [nzSpan]="8">
        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading" (click)="fetchServiceLogList()">搜索</button>
        <button nz-button type="reset" class="mx-sm" (click)="fetchServiceLogList(true)">重置</button>
      </nz-col>
    </nz-row>
  </form>

  <!-- 数据表格 -->
  <nz-table #serviceLogTable [nzData]="servicelogList" [nzFrontPagination]="false" [nzLoading]="loading" [nzTotal]="dataTotal"
    [(nzPageIndex)]="pageIndex" [(nzPageSize)]="pageSize" (nzPageIndexChange)="fetchServiceLogList()">
    <thead>
      <tr>
        <th nzWidth="10%">日志id</th>
        <th nzWidth="10%">日志类型</th>
        <th nzWidth="60%">日志内容</th>
        <th nzWidth="20%">日志记录时间</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of serviceLogTable.data">
        <td>{{ item.id }}</td>
        <td>
          <nz-tag [nzColor]="'#87d068'" *ngIf="item.logType === 'info'">普通日志</nz-tag>
          <nz-tag [nzColor]="'#f50'" *ngIf="item.logType === 'error'">错误日志</nz-tag>
        </td>
        <td>{{ item.logContent }}</td>
        <td>{{ item.createdAt | date: 'yyyy-MM-dd HH:mm:ss' }}</td>
      </tr>
    </tbody>
  </nz-table>
</nz-card>